﻿@page "/barcodereaders"

<h3>BarcodeReader 条码扫描</h3>

<h4>本组件通过调用摄像头对条码进行扫描，获取到条码内容条码/QR码</h4>

<p><b>特别注意：</b></p>
<ul class="ul-demo">
    <li>站点要启用 <code>https</code>，这是浏览器厂商要求的</li>
    <li>移动端 iOS 系统必须使用 <code>Safari</code> 浏览器，切换前/后摄像头要点一下关闭功能按钮</li>
    <li>安卓手机大概率需要原生系统浏览器，<code>Chrome</code> 是必定可以的，某些浏览器可能不兼容摄像头</li>
    <li>条码识别率与手机像素，条码大小，手机执行效率有关</li>
</ul>

<Block Title="基本用法" Introduction="通过摄像头进行扫码识别">
    <p>操作步骤：</p>
    <ul class="ul-demo">
        <li>点击开始打开摄像头</li>
        <li>对准条码进行扫描</li>
        <li>点击关闭按钮关闭摄像头</li>
    </ul>
    <BarcodeReader OnInit="@OnInit" OnResult="@OnResult" OnStart="@OnStart" OnClose="@OnClose" OnError="@OnError" />
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="基本用法" Introduction="通过静态图片进行扫码识别">
    <p>操作步骤：</p>
    <ul class="ul-demo">
        <li>点击扫码弹出选择文件框</li>
        <li>选取包含条码图片</li>
        <li>开始识别条码</li>
    </ul>
    <BarcodeReader ScanType="@ScanType.Image" OnResult="@OnImageResult" OnError="@OnImageError" />
    <Logger @ref="Trace2" class="mt-3" />
</Block>

<Block Title="自动开始" Introduction="通过设置 <code>AutoStart</code> 参数设置自动开启摄像头">
    <p>操作步骤：</p>
    <ul class="ul-demo">
        <li>点击扫码弹出选择文件框</li>
        <li>选取包含条码图片</li>
        <li>开始识别条码</li>
    </ul>
    <BarcodeReader OnResult="@OnImageResult" OnError="@OnImageError" AutoStart="true" />
    <Logger @ref="Trace2" class="mt-3" />
</Block>

<AttributeTable Items="@GetAttributes()" />
